﻿
<!--_meta 作为公共模版分离出去-->
{include file="public/_meta"}

<input type="hidden" id="TenantId" name="TenantId" value="" />
<div class="header"></div>
<div class="loginWraper">
  <div id="loginform" class="loginBox">
    <form class="form form-horizontal" action="" method="post">
      <div class="row cl">
        <label class="form-label col-xs-3"><i class="Hui-iconfont">&#xe60d;</i></label>
        <div class="formControls col-xs-8">
          <input id="username" name="username" type="text" placeholder="账户" class="input-text size-L username">
        </div>
      </div>
      <div class="row cl">
        <label class="form-label col-xs-3"><i class="Hui-iconfont">&#xe60e;</i></label>
        <div class="formControls col-xs-8">
          <input id="password" name="password" type="password" placeholder="密码" class="input-text size-L">
        </div>
      </div>
      <div class="row cl">
        <div class="formControls col-xs-8 col-xs-offset-3">
          <div id="embed-captcha"></div>
          <p id="wait" class="show">正在加载验证码......</p>
          <p id="notice" class="hide" style="color: red;">请先完成验证</p>
        </div>
      </div>
      <div class="row cl">
        <div class="formControls col-xs-8 col-xs-offset-3">
          <label for="online">
            <input type="checkbox" name="online" id="online" value="">
            使我保持登录状态</label>
        </div>
      </div>
      <div class="row cl">
        <div class="formControls col-xs-8 col-xs-offset-3">
          <input id="login" name="" type="button" class="btn btn-success radius size-L" value="&nbsp;登&nbsp;&nbsp;&nbsp;&nbsp;录&nbsp;">
          <input name="" type="reset" class="btn btn-default radius size-L" value="&nbsp;取&nbsp;&nbsp;&nbsp;&nbsp;消&nbsp;">
        </div>
      </div>
    </form>
  </div>
</div>
</body>
<!--_footer 作为公共模版分离出去-->
{include file="public/_footer"}


<script>
    //回车键登录提交
      $("body").keydown(function() {
          if (event.keyCode == "13") {  //keyCode=13是回车键
           // console.log(document.getElementById("login"));return;
            $("#login").click(); //调用登录按钮的登录事件
          }
      });



    var handlerEmbed = function (captchaObj) {
      $("#login").click(function (e) {
        var validate = captchaObj.getValidate();
        if (!validate) {
          $("#notice")[0].className = "show";
          setTimeout(function () {
            $("#notice")[0].className = "hide";
          }, 2000);
          e.preventDefault();
        }

        if($('#username').val() == ''){
          layer.msg('用户名不能为空!',{icon: 5,time:1000});
        }else if($('#password').val() == ''){
          layer.msg('密码不能为空!',{icon: 5,time:1000});
        }

        var username = document.getElementById('username').value;
        var password = document.getElementById('password').value;

        $.ajax({
          type: 'post',
          url: "{:url('login/VerifyLoginServlet')}",
          dataType: 'json',
          data: {
            username:username,
            password:password,
            //code:code,
            // 这是二次验证所需的三个值
            // 当然，你也可以直接设置验证码单独校验，省略其他信息
            geetest_challenge: validate.geetest_challenge,
            geetest_validate: validate.geetest_validate,
            geetest_seccode: validate.geetest_seccode
          },
          success: function(msg){
            if(msg.status == true){
              layer.msg(msg.message,{icon: 6,time:2000});
              setTimeout(jump,1000);
              function jump(){
                window.location.href="{:url('index/index')}";
              }
            }else if(msg.status == false){
              layer.msg(msg.message,{icon: 5,time:1000});
            }
          }
        });
      });
      // 将验证码加到id为captcha的元素里，同时会有三个input的值：geetest_challenge, geetest_validate, geetest_seccode
      captchaObj.appendTo("#embed-captcha");
      captchaObj.onReady(function () {
        $("#wait")[0].className = "hide";
      });
      // 更多接口参考：http://www.geetest.com/install/sections/idx-client-sdk.html
    };




    /*生成人机验证码*/
    $(function(){
      var username = $('#username').val();
      var password = $('#password').val();


      $.ajax({
        // 获取id，challenge，success（是否启用failback）
        url: "{:url('login/StartCaptchaServlet')}?t=" + (new Date()).getTime(), // 加随机数防止缓存
        type: "get",
        dataType: "json",
        data: {username:username,password:password},
        success: function (data) {
          //console.log(data);
          // 使用initGeetest接口
          // 参数1：配置参数
          // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件
          initGeetest({
            gt: data.gt,
            challenge: data.challenge,
            new_captcha: data.new_captcha,
            product: "embed", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效
            width: '360px',
            offline: !data.success // 表示用户后台检测极验服务器是否宕机，一般不需要关注
            // 更多配置参数请参见：http://www.geetest.com/install/sections/idx-client-sdk.html#config
          }, handlerEmbed);
        }
      });
      });

</script>
<!--/请在上方写此页面业务相关的脚本-->


</html>